<template>
    <div>
        <div class="right-help-bg"></div>
        <header class="dflex">
            <i class="el-icon-s-home mr5 ml5 pointer f20"></i>
            <i class="el-icon-files mr5 ml5 pointe f20" aria-hidden="true"  @click="fullScreen"></i>
            <i class="el-icon-s-unfold mr5 ml5 pointer f20" aria-hidden="true" @click="changeWidth"></i>
            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="mini">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <i class="el-icon-close mr5 ml5 pointer f20" aria-hidden="true" @click="close"></i>
        </header>
        <!-- Home page -->
        <section class="p10" v-if="!isDetail">
            <h4>Manage Inventory</h4>
            <div class="mt20 pointer" style="border-bottom: 1px solid #c3c3c3;width: 100%;" @click="isDetail=!isDetail">
                <h5 class="text-orange">FBA Small and Light</h5>
                <h6 class="text-gray">Fulfiment by Amazon</h6>
            </div>

            <div class="mt20 pointer" style="border-bottom: 1px solid #c3c3c3;width: 100%;" @click="isDetail=!isDetail">
                <h5 class="text-orange">FBA Small and Light</h5>
                <h6 class="text-gray">Fulfiment by Amazon</h6>
            </div>

            <div class="mt20 pointer" style="border-bottom: 1px solid #c3c3c3;width: 100%;" @click="isDetail=!isDetail">
                <h5 class="text-orange">FBA Small and Light</h5>
                <h6 class="text-gray">Fulfiment by Amazon</h6>
            </div>

            <div class="mt20 pointer" style="float: right;text-align: end;">
                <span>Browse Help</span>
                <i class="el-icon-caret-right"></i>
            </div>
        </section>

        <!-- Detail page -->
        <section class="p10" v-else>
            <div class="pointer mb20" @click="isDetail=!isDetail">
                <i class="el-icon-arrow-left"></i>
                <span>Back</span>
            </div>

            <h4>I am Help Detail</h4>
            <h5>I am Help Detail </h5>
        </section>

        <footer class="rightFooter">
            <div class="rightFooterItem pointer">
                <i class="el-icon-s-order text-white f20"></i>
                <span class="text-white f10">Forums</span>
            </div>
            <div class="rightFooterItem pointer">
                <i class="el-icon-chat-dot-square text-white f20"></i>
                <span class="text-white f10">Help</span>
            </div>
            <div class="rightFooterItem pointer">
                <i class="el-icon-postcard text-white f20"></i>
                <span class="text-white f10">Logs</span>
            </div>
        </footer>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isDetail: false
            }
        },
        methods: {
            close(){
                this.$emit("close")
            },
            changeWidth(){
                this.$emit("changeWidth")
            },
            fullScreen(){
                this.$emit("fullScreen")
            }
        },
    }
</script>